import { useState, useEffect, useCallback } from 'react';//生命状态，生命周期;大括号命名导出
import './App.css';
import Home from './Home'
import Topic from './Topic'
import Header from './Header'
import Me from './Me'
import Message from './Message'
import Publish from './Publish'
import Collection from './Collection'
import Table from './Table'
// import {BrowserRouter,Route,Switch} from 'react-router-dom';
import {
  Route,
  Switch,
  BrowserRouter as Router,//MemoryRouter手机端不会显示地址
} from 'react-router-dom'



const style = {
  lineHeight: '100px',
  textAlign: 'center',
  height: 100,
  fontWeight: 'bold',
  background: 'pink'
}



const App = () => {
  return (
    <Router>
      <header style={style}><Header /></header>
      <Switch>
        <Route exact path='/'>
          <Home />
        </Route>
        <Route path='/topic/:id' component={Topic}></Route>
        <Route path='/collection'><Collection /></Route>
        <Route path='/table'>
          <Table />
        </Route>
        <Route path='/publish'>
          <Publish />
        </Route>
        <Route path='/message'>
          <Message />
        </Route>
        <Route path='/me'>
          <Me />
        </Route>
      </Switch>
    </Router>
  )
}


export default App;
